<template>
    <div class="custom f-cb">
        <open-account-pregress></open-account-pregress>
        <div class="customBorder f-cb">
            <el-form  ref="numberValidateForm" class="demo-ruleForm" label-width="120px" :rules="rules" :model="numberValidateForm">
                <el-form-item :label="item['title_'+lang]" class="f-cb" 
                    v-for="(item,index) in list" 
                    :key="index" 
                    :prop="item.name"
                    :class="[item.titleNone?'titleNone':'',item.borderNone?'borderNone':'',item.titlebock?'titlebock':'',item.is_require==1?'is-required':'',item.mbNone?'mbnone':'']"
                   
                >
                    <a-firstTitle :val="item['title_'+lang]" v-if="item.type=='firstTitle'"></a-firstTitle>
                    <a-text-area :val="item['title_'+lang]" v-if="item.type=='textarea' || item.type=='editor'"></a-text-area>
                    <a-text :val="item['title_'+lang]" v-if="item.type=='text'"></a-text>
                    <a-switch  
                        :list="item" 
                        :lang="lang"
                        isnone="false"
                        v-if="item.type=='switch'" 
                        v-model="numberValidateForm[item.name]"
                        @input="validateField(item.name)"
                        @changeRules="changeRulesData"
                        @openClick="openClick"
                    >
                    </a-switch>
                    <a-select 
                        :lang="lang" 
                        :list="item" 
                        isnone="false"
                        v-if="item.type=='select'"
                        v-model="numberValidateForm[item.name]"
                        @input="validateField(item.name)"
                        @changeRules="changeRulesData"
                    >
                    </a-select>
                    <a-input 
                        :list="item"
                        :lang="lang"
                        isnone="false"
                        v-if="item.type=='input'"
                        v-model="numberValidateForm[item.name]" 
                        @input="validateField(item.name)"
                        @changeRules="changeRulesData"
                    >
                    </a-input>
                    <a-check-box
                        :list="item" 
                        :lang="lang" 
                        isnone="false"
                        v-if="item.type=='checkbox'" 
                        v-model="numberValidateForm[item.name]" 
                        @input="validateField(item.name)"
                        @changeRules="changeRulesData"
                    >
                    </a-check-box>
                    <a-radio
                        :list="item" 
                        :lang="lang" 
                        isnone="false"
                        v-if="item.type=='radio'" 
                        v-model="numberValidateForm[item.name]" 
                        @input="validateField(item.name)"
                        @changeRules="changeRulesData"
                    >
                    </a-radio>
                    <a-date 
                        :lang="lang" 
                        :list="item" 
                        isnone="false"
                        v-if="item.type=='date' || item.type=='datetime'"
                        v-model="numberValidateForm[item.name]" 
                        @input="validateField(item.name)"
                        @changeRules="changeRulesData"
                    >
                    </a-date>
                    <a-ident-cards 
                        :list="item" 
                        v-if="item.type=='identCards'" 
                        :lang="lang" 
                        isnone="false"
                        v-model="numberValidateForm[item.name]" 
                        @input="validateField(item.name)"
                        @changeRules="changeRulesData"
                    >
                    </a-ident-cards>
                    <a-upload
                        :list="item" 
                        v-if="item.type=='upload'" 
                        :lang="lang" 
                        :isnone="false"
                        :isShow="true"
                        v-model="numberValidateForm[item.name]" 
                        @input="validateField(item.name)"
                        @changeRules="changeRulesData"
                    ></a-upload>
                    <div 
                        v-if="item.type == 'row' && ((numberValidateForm[item.config.keyName] == item.config.keyValue && item.config.keyValue != '' ) || item.cardIsUpload) " 
                    >
                        <el-form-item
                            v-for="(ContainerItem,ContainerIndex) in item.container"
                            :key="ContainerIndex" 
                            :label="ContainerItem['title_'+lang]"
                            class="f-cb ContainerItem"
                            :prop="ContainerItem.name"
                            :class="[ContainerItem.titleNone?'titleNone':'',ContainerItem.borderNone?'borderNone':'',ContainerItem.titlebock?'titlebock':'',ContainerItem.is_require==1?'is-required':'',ContainerItem.mbNone?'mbnone':'']"
                        >
                            <a-firstTitle :val="ContainerItem['title_'+lang]" v-if="ContainerItem.type=='firstTitle'"></a-firstTitle>
                            <a-text-area :val="ContainerItem['title_'+lang]" v-if="ContainerItem.type=='textarea' || ContainerItem.type=='editor'"></a-text-area>
                            <a-text :val="item['title_'+lang]" v-if="item.type=='text'"></a-text>
                            <a-switch  
                                :list="ContainerItem" 
                                :lang="lang"
                                isnone="true"
                                v-if="ContainerItem.type=='switch'" 
                                v-model="numberValidateForm[ContainerItem.name]"
                                @input="validateField(ContainerItem.name)"
                                @changeRules="changeRulesData"
                                @openClick="openClick"
                            >
                            </a-switch>
                            <a-select 
                                :lang="lang" 
                                :list="ContainerItem" 
                                isnone="true"
                                v-if="ContainerItem.type=='select'"
                                v-model="numberValidateForm[ContainerItem.name]"
                                @input="validateField(ContainerItem.name)"
                                @changeRules="changeRulesData"
                            >
                            </a-select>
                            <a-input 
                                :list="ContainerItem"
                                :lang="lang"
                                isnone="true"
                                v-if="ContainerItem.type=='input'"
                                v-model="numberValidateForm[ContainerItem.name]" 
                                @input="validateField(ContainerItem.name)"
                                @changeRules="changeRulesData"
                            >
                            </a-input>
                            <a-check-box
                                :list="ContainerItem" 
                                :lang="lang" 
                                :isnone="true"
                                :isShow="(numberValidateForm[item.config.keyName] == item.config.keyValue && item.config.keyValue != '' ) || item.cardIsUpload?true:false"
                                v-if="ContainerItem.type=='checkbox'" 
                                v-model="numberValidateForm[ContainerItem.name]" 
                                @input="validateField(ContainerItem.name)"
                                @changeRules="changeRulesData"
                            >
                            </a-check-box>
                            <a-radio
                                :list="ContainerItem" 
                                :lang="lang" 
                                isnone="true"
                                v-if="ContainerItem.type=='radio'" 
                                v-model="numberValidateForm[ContainerItem.name]" 
                                @input="validateField(ContainerItem.name)"
                                @changeRules="changeRulesData"
                            >
                            </a-radio>
                            <a-date 
                                :lang="lang" 
                                :list="ContainerItem" 
                                isnone="true"
                                v-if="ContainerItem.type=='date' || ContainerItem.type=='datetime'"
                                v-model="numberValidateForm[ContainerItem.name]" 
                                @input="validateField(ContainerItem.name)"
                                @changeRules="changeRulesData"
                            >
                            </a-date>
                            <a-upload
                                :list="ContainerItem" 
                                v-if="ContainerItem.type=='upload'" 
                                isnone="true"
                                :lang="lang" 
                                v-model="numberValidateForm[ContainerItem.name]" 
                                @input="validateField(item.name)"
                                @changeRules="changeRulesData"
                            ></a-upload>
                        </el-form-item>
                    </div>
                </el-form-item>
                <next-back @NextClick="NextClick" @PrevClick="PrevClick"></next-back>
            </el-form>
        </div>
        <statement-list :show="isStatementinfo" @closeClick="closeClick" :Data="StatementData" @openClick="openClickInfo"></statement-list>
        <statement :show="isStatement" @closeClick="closeClick" :Data="StatementDatas"></statement>
    </div>
</template>
<script>
    
    import openAccountPregress from "@/components/assembly/openAccountProgress.vue";
    import NextBack from "@/components/inc/NextBack.vue";
    import AUpload from "@/components/assembly/AUpload";
    import ATextArea from "@/components/assembly/ATextArea";
    import AText from "@/components/assembly/AText";
    import ASwitch from "@/components/assembly/ASwitch";
    import ASelect from "@/components/assembly/ASelect";
    import ARadio from "@/components/assembly/ARadio";
    import AInput from "@/components/assembly/AInput";
    import AIdentCards from "@/components/assembly/AIdentCards";
    import AFirstTitle from "@/components/assembly/AFirstTitle";
    import ADate from "@/components/assembly/ADate";
    import ACheckBox from "@/components/assembly/ACheckBox";
    import StatementList from "@/components/popup/statementList.vue";
    import Statement from "@/components/popup/statement.vue";
    import {pageFlow,BtnsFlow,uploads,analyse,submit,getsubscript} from "@/common/common";
    export default {
        name:"custom",
        components: {
            openAccountPregress,
            NextBack,
            AUpload,
            ATextArea,
            ASwitch,
            ASelect,
            ARadio,
            AInput,
            AIdentCards,
            AFirstTitle,
            ADate,
            ACheckBox,
            StatementList,
            Statement,
            AText
        },
        data() {
            return{
                video:"",
                list:[],
                lang:sessionStorage.getItem("lang")=='zh-CN'?'zh':sessionStorage.getItem("lang")=='zh-TW'?'tc':'en',
                numberValidateForm:{},
                rules:{},
                otherRules:{},
                allRules:{},
                flowinfo:{},
                cardIsUpload:false,
                isStatement:false,
                isStatementinfo:false,
                StatementDatas:"",
                StatementData:[],
                num:0,
            };
        },
        computed:{},
        mounted(){
            var _this = this;
            this.flowinfo = JSON.parse(sessionStorage.getItem('flowInfo'))
            this.$nextTick(function(){
                _this.num = getsubscript(_this.flowinfo)
                _this.getflow(_this.flowinfo.page_flow[_this.num])
                _this.getagreement();
                window.document.title = _this.flowinfo.page_info['name_'+_this.lang]
            })
            
        },
        methods:{
            //判断行容器是否显示
            cardIs(item){
                var _this = this,listItem = "";
                //console.log(item,'listItem')
                _this.list.forEach(function(res){
                    if(res.name == item.config.keyName && res.type=="identCards"){
                        listItem = _this.numberValidateForm[res.name]
                    }
                })
                if(listItem == ""){
                    item.cardIsUpload = false;
                }else{
                    item.cardIsUpload = true;
                }
            },
            validateField(type){
                var _this = this;
                _this.$forceUpdate()
                _this.list.forEach(function(res,index){
                    if(res.type=='row'){
                        _this.cardIs(res)
                    }
                })
                this.$refs.numberValidateForm.validateField(type);
            },
            //动态添加表单验证
            changeRulesData(key,msg,isnone){
                // console.log(key,msg,isnone,isshow,'888888')
                this.allRules[key] = msg;
                this.rules[key] = msg;
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.$forceUpdate()
            },
            getflow(page){
                var _this = this;
                pageFlow(page,res => {
                    var res = res.data;
                    if(res.code == 1){
                        sessionStorage.setItem('flowInfo',JSON.stringify(res.data))
                        this.list = res.data.page_info.fields;
                        if(JSON.stringify(res.data.user_fill) =='{}'){
                            this.list.forEach(function(res,index){
                                if(!['row','firstTitle','editor','textarea'].includes(res.type)){
                                    _this.$set(_this.numberValidateForm,res.name,"")
                                }
                                _this.includes(res)
                                if(res.type=='row'){
                                    _this.cardIs(res)
                                    res.container.forEach(function(resItem){
                                        _this.$set(_this.numberValidateForm,resItem.name,resItem.config.defaultValue)
                                        _this.includes(resItem)
                                    })
                                }
                            })
                        }else{
                            _this.numberValidateForm = res.data.user_fill;
                            this.list.forEach(function(res,index){
                                _this.includes(res)
                                _this.cardIs(res)
                                if(res.type=='row'){
                                    res.container.forEach(function(resItem){
                                        _this.includes(resItem)
                                    })
                                }
                            })
                        }
                    }else if(res.code == 401){
                         _this.$router.replace({path:'/'})
                    }else if(res.code == 102 || res.code == 103){
                        _this.$router.replace({path:'/examine'})
                    }else if(res.code == 104){
                        _this.$router.go(0)
                    }else{
                        this.$message({
                            message: res.msg,
                            type: "warning"
                        });
                    }
                })
            },
            //判断是否加类
            includes(items){
                if(['firstTitle','textarea','editor','switch','row','identCards','text'].includes(items.type)){
                    items.titleNone = true;
                }else{
                    items.titleNone = false;
                }
                if(['row'].includes(items.type)){
                    items.mbNone = true;
                }else{
                    items.mbNone = false;
                }
                if(['firstTitle','textarea','editor','switch','checkbox','radio','row','identCards','upload','text'].includes(items.type)){
                    items.borderNone = true;
                }else{
                    items.borderNone = false;
                }
                if(['checkbox','radio','upload'].includes(items.type)){
                    items.titlebock = true;
                }else{
                    items.titlebock = false;
                }
            },
            showRow(defaultValue,val){
                // defaultValue  关联字段选择的值
                // val  后台返回的值
                console.log('defaultValue:'+defaultValue,'val:'+val)
                if((defaultValue && val) && defaultValue == val){
                    return true
                }else{
                    return false
                }
            },
            NextClick(){
                var _this = this;
                this.$refs['numberValidateForm'].validate((valid) => {
                    if (valid) {
                        var data = {
                            pageId:_this.flowinfo.page_info.id,
                            fields:_this.numberValidateForm,
                            isModify:Number(sessionStorage.getItem("isModify"))==0?'':Number(sessionStorage.getItem("isModify")),
                        }
                        submit(data,res => {
                            var res = res.data;
                            if(res.code == 1){
                                if(_this.flowinfo.page_info.id == _this.flowinfo.page_flow[_this.flowinfo.page_flow.length - 1]){
                                    _this.$router.replace({ path:'/examine'});
                                }else{
                                    _this.BtnsFlowBtn()
                                    //_this.flowinfo.page_flow[_this.num + 1]
                                }
                            }else if(res.code == 401){
                                _this.$router.replace({path:'/'})
                            }else{
                                _this.$message({
                                    message: res.msg,
                                    type: "warning"
                                })
                            }
                        })
                    }
                }); 
            },
            PrevClick(){
                var _this = this;
                //console.log(this.flowinfo.page_info.id,this.flowinfo.page_flow[0],this.num,'上一步')
                if(this.flowinfo.page_info.id == this.flowinfo.page_flow[0]){
                    if(Number(sessionStorage.getItem('isModify')) == 1){
                        _this.$router.replace({ path:'/examine'});
                    }else{
                        _this.$router.replace({ path:'/documentType'});
                    }
                }else{
                    _this.BtnsFlowBtn(this.flowinfo.page_flow[this.num - 1])
                }
            },
            BtnsFlowBtn(page){
                var _this = this;
                BtnsFlow(page,res => {
                    var res = res.data;
                    if(res.code == 1){
                        sessionStorage.setItem('flowInfo',JSON.stringify(res.data))
                        //console.log(res,res.data,'res')
                        if(res.data.page_info.type==2){
                            _this.$router.replace({ path:'/custom?id='+res.data.page_info.id});
                        }else{
                            _this.$router.replace({ path:'/'+res.data.page_info.url_path});
                        }
                    }else if(res.code == 102){
                        _this.$router.replace({path:'/examine'})
                    }else if(res.code == 104){
                        _this.$router.go(0)
                    }else if(res.code == 401){
                         _this.$router.replace({path:'/'})
                    }else{
                        this.$message({
                            message: res.msg,
                            type: "warning"
                        });
                    }
                })
            },
            // 打开弹窗
            openClick(msg){
                this[msg] = true;
            },
            //关闭弹框
            closeClick(msg){
                this[msg] = false;
            },
            getagreement(){
                var _this = this;
                _this.$axios.get('/agreement',{params:{
                    type:1,
                    pageSize:1,
                }})
                .then(res => {
                    if(res.data.code == 1){
                        _this.StatementData = res.data.data
                    }else if(res.code == 401){
                        _this.$router.replace({path:'/'})
                    }else{
                        _this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    
                })
                .catch(function(error) {
                    console.log(error)
                })
            },
            openClickInfo(msg,id){
                 var _this = this;
                this[msg] = true;
                _this.$axios.get('/agreement/'+id)
                .then(res => {
                    if(res.data.code == 1){
                        this.StatementDatas = res.data.data;
                    }else if(res.code == 401){
                        _this.$router.replace({path:'/'})
                    }else{
                        _this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    
                })
                .catch(function(error) {
                    console.log(error)
                })
            }
        },
        watch:{

        }
    }
</script>

<style lang="less">
    .customBorder{
        width:460px;
        margin:0 auto;
        position: relative;
        .demo-ruleForm{
            width: 100%;
            .title{
                font-size: 20px;
                font-weight: bold;
                color: @000;
                line-height:40px;
            }
            .title_msg{
                font-size: 14px;
                color: @titleColor;
                line-height:22px;
            }
            .el-form-item__label{
                font-size: 14px;
                text-align: left;
                color: @titleColor;
            }
            .el-form-item{
                margin-bottom:15px;
                border-bottom:1px solid @e7e6eb;
                .el-select{
                    width: 100%; 
                }
                .el-date-editor.el-input{
                    width: 100%;
                }
                .el-input__inner{
                    border:none;
                    font-size: 14px;
                    color: #000;
                    background: none;
                }
                .el-checkbox,.el-radio{
                    display: block;
                    font-size: 14px;
                    margin-bottom: 5px;
                }
                .el-input__inner:-moz-placeholder{
                    color: @titleColor !important;
                }
                .el-input__inner::-moz-placeholder{
                    color: @titleColor !important;
                }
                .el-input__inner:-ms-input-placeholder{
                    color: @titleColor !important;
                }
                .el-input__inner::-webkit-input-placeholder{
                    color: @titleColor !important;
                }
                .el-checkbox__inner{
                    border-radius: 50%;
                }
                .el-checkbox__label{
                    max-width: 386px;
                    display: block;
                    float: left;
                    line-height: 22px;
                    font-size: 14px;
                    color: @titleColor;
                }
                .el-checkbox-group .el-checkbox__label{
                    color: #666;
                }
                .el-radio__label{
                    line-height: 22px;
                    font-size: 14px;
                    color: @titleColor;
                }
                .el-checkbox, .el-checkbox__input{
                    white-space: initial;
                    float: left;
                }
                .blueColor{
                    color: @hoverColor;
                }
                .el-checkbox__input{
                    margin-top: 3px;
                }
                .scrollfonts{
                    font-size: 14px;
                    color: #666;
                    line-height: 24px;
                    max-height: 300px;
                    overflow: auto;
                }
                
            }
            .el-form-item.mbnone{
                margin-bottom: 0;
            }
            .el-form-item.borderNone{
                border-bottom: none;
                .ContainerItem{
                    border-bottom:1px solid @e7e6eb;
                }
                .ContainerItem.borderNone{
                    border:none;
                }
            }
            .el-form-item.titlebock{
                .el-form-item__label{
                    display: block;
                    font-size: 20px;
                    font-weight: bold;
                    color: @000;
                    line-height:40px;
                    width: 100% !important;
                }
                .el-form-item__content{
                    margin-left: 0 !important;
                }
                .el-form-item__label:before{
                    display: none;
                }
                .ContainerItem{
                    .el-form-item__label{
                        display:inline-block;
                        width:120px !important;
                    }
                    .el-form-item__content{
                        margin-left:120px !important;
                    }
                }
                .ContainerItem.titlebock{
                    .el-form-item__label{
                        display: block;
                        width: 100% !important;
                    }
                    .el-form-item__content{
                        margin-left: 0 !important;
                    }
                }
            }
            .el-form-item.titleNone{

                .el-form-item__label{
                    display:none;
                }
                .el-form-item__content{
                    margin-left: 0 !important;
                }
                .ContainerItem{
                    .el-form-item__label{
                        display:inline-block;
                    }
                    .el-form-item__content{
                        margin-left:120px !important;
                    }
                }
                .ContainerItem.titleNone{
                    .el-form-item__label{
                        display:none;
                    }
                    .el-form-item__content{
                        margin-left: 0 !important;
                    }
                }
            }
        }
    }
</style>